<h1> Справочник по синтаксису Markdown и расширений </h1>

Данная статья демонстрирует возможности языка разметки [Markdown](https://daringfireball.net/projects/markdown) с использованием расширений: [markdown extra](https://belousovv.ru/php/MarkdownExtra), [mathjax 3](https://www.mathjax.org), [admonitions](https://docutils.sourceforge.io/docs/ref/rst/directives.html#admonitions), [table of contents](https://python-markdown.github.io/extensions/toc), [wikilinks](https://python-markdown.github.io/extensions/wikilinks), [mermaid][].

[mermaid]: https://mermaid-js.github.io

Статья на языке Markdown должна иметь расширение **.md**.

# Оглавление

[TOC]

# Markdown разметка

► Обычный текст (как этот) считается параграфом. Для жёсткого разрыва используется пустая строка. Для мягкого разрыва (например, в многострочном элементе списка) используется двойной пробел в конце строки.

```markdown
Обычный текст (как этот) считается параграфом. Для жёсткого разрыва используется пустая строка. Для мягкого разрыва (например, в многострочном элементе списка) используется двойной пробел в конце строки.
```

► В качестве блочных можно встраивать блочные HTML элементы. Пример встроенной HTML таблицы:

<table border="1">
    <tr>
        <td>Foo</td>
    </tr>
</table>

```html
<table border="1">
    <tr>
        <td>Foo</td>
    </tr>
</table>
```

► В качестве строчных можно встраивать строчные HTML элементы, например <del>del</del>.

```markdown
В качестве строчных можно встраивать строчные HTML элементы, например <del>del</del>.
```

##### ► Заголовки помечаются символами "#...# " (с пробелом) в начале строки. Количество символов равняется уровню заголовка. {data-toc-label='Пример заголовка 5 уровня'}

```markdown
##### Заголовки помечаются символами "#...# " (с пробелом) в начале строки. Количество символов равняется уровню заголовка.
```

> ► Цитаты начинаются с символа ">" в начале строки

```markdown
> Цитаты начинаются с символа ">" в начале строки
```

► Маркированные списки начинаются со следующих символов в начале строке:
- "-"
* "*"
+ "+"

```markdown
Маркированные списки начинаются со следующих символов в начале строке:
- "-"
* "*"
+ "+"
```

► Нумерованные списки начинаются с цифры (далее следует автонумерация) с точкой:
2. два
1. один
1. один

```markdown
Нумерованные списки начинаются с цифры (далее следует автонумерация) с точкой:
2. два
1. один
1. один
```

► Блоки кода обозначаются отступом в 4 пробела (табуляция):

    #include <stdio.h>
    
    int main(void)
    {
      printf("Hello World\n");
      return 0;
    }

```markdown
    #include <stdio.h>
    
    int main(void)
    {
      printf("Hello World\n");
      return 0;
    }
```

► Строки кода можно встроить в обычную строку, обрамляя символами тильда (`printf("Hello World\n");`).

```markdown
Строки кода можно встроить в обычную строку, обрамляя символами тильда (`printf("Hello World\n");`).
```

► Строки, состоящие из повторяющихся три и более раза подряд символов "*" или "-" образуют горизонтальную линию:

---

```markdown
---
```

► [Ссылки](# "Подсказка") обозначаются следующим образом (между скобками возможен один пробел):

    [Текст](url "Опциональная подсказка")

```markdown
[Ссылки](# "Подсказка") обозначаются ...
```

[Длинные ссылки][long_link_id] можно раскрывать где-нибудь в удобном месте документа (например, в конце).

    [Текст][id ссылки]
    ...
    [id ссылки]: url "Опциональная подсказка"

[long_link_id]: # "Подсказка длинной ссылки"

Если название [ссылки][] является одним словом, id ссылки можно опустить.

    [Слово][]
    ...
    [Слово]: url "Опциональная подсказка"

[ссылки]: # "Сокращённая длинная ссылка"

► Текст можно *выделять* и **сильно выделять**, обрамляя одним или парой символов "*" или "_".

```markdown
Текст можно *выделять* и **сильно выделять**, обрамляя одним или парой символов "*" или "_".
```

► Специальные символы (\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!) можно вставлять в текст через слэш в начале \\<символ>.

```markdown
Специальные символы (\\\`\*\_\{\}\[\]\(\)\#\+\-\.\!) можно вставлять текст через слэш в начале \\<символ>.
```

► В текст и ссылки можно встраивать изображения аналогично ссылкам (включая длинные ссылки с id):

    ![Альтернативный текст](url "Опциональная подсказка")

![Альтернативный текст][base64image]

```markdown
![Альтернативный текст][base64image]
...
[base64image]: ....Y= "Пример изображения" 
```

► Ссылки, обрамлённые в угловые кавычки, автоматически генерируются прямо в тексте (например, <http://example.com/> или <address@example.com>).

```markdown
Ссылки, обрамлённые в угловые кавычки, автоматически генерируются прямо в тексте (например, <http://example.com/> или <address@example.com>).
```



# Markdown extra разметка

<table border="1" markdown="1">  
	<tr>
		<td>
			► *Markdown-текст* можно встраивать прямо в блочные HTML элементы, указав аттрибут *markdown="1"*.
		</td>
	</tr>
</table>

```html
<table border="1" markdown="1">  
	<tr>
		<td>
			*Markdown-текст* можно встраивать прямо в блочные HTML элементы, указав аттрибут *markdown="1"*.
		</td>
	</tr>
</table>
```

► В фигурных скобках можно указать класс (через точку) или id (через решётку) элемента (например, класс кода используется для правильной подсветки `printf("Hello World\n");`{.cpp}).

##### Заголовок с id *test-id* и классами *a* и *b*. {.a #test-id .b data-toc-label='Пример заголовка с аттрибутами'}

[Ссылка на заголовок test-id](#test-id)

```markdown
В фигурных скобках можно указать класс (через точку) или id (через решётку) элемента (например, класс кода используется для правильной подсветки `printf("Hello World\n");`{.cpp}).

##### Заголовок с id *test-id* и классами *a* и *b*. {.a #test-id .b}

[Ссылка на заголовок test-id](#test-id)
```

► Код можно указать в специальном блоке без отступов следующим синтаксисом:

~~~.markdown
```название_языка
код
```
~~~

или

```markdown
~~~.название_языка
код
~~~
```

или

```markdown
~~~ {.название_языка .класс1 .класс2 #id}
код
~~~
```

Пример C++ "Hello, world":

```cpp
#include <stdio.h>

int main(void)
{
  printf("Hello World\n");
  return 0;
}
```

~~~.markdown
```cpp
#include <stdio.h>

int main(void)
{
  printf("Hello World\n");
  return 0;
}
```
~~~


► Таблицы можно записывать упрощённым способом. Пример:

Колонка 1 |Колонка 2
----------------- | -----------------
Содержимое Ячейки | Содержимое Ячейки
Содержимое Ячейки | Содержимое Ячейки

```markdown
Колонка 1 |Колонка 2
----------------- | -----------------
Содержимое Ячейки | Содержимое Ячейки
Содержимое Ячейки | Содержимое Ячейки
```

Для красоты можно выставить символы "|" в начале и конце каждой строки. Также можно задать выравнивание в колонках через двоеточие слева или справа:

| Предмет   | Цена  |
| --------- | -----:|
| Компьютер | $1600 |
| Телефон   |   $12 |
| Трубка    |    $1 |

```markdown
| Предмет   | Цена  |
| --------- | -----:|
| Компьютер | $1600 |
| Телефон   |   $12 |
| Трубка    |    $1 |
```

►  Списки определения создаются с помощью специального синтаксиса.

```markdown
Термин 1
:	определение 1
Термин 2
:	определение 2
```

Можно указывать несколько терминов с новой строки и несколько определений, включаяя многострочные, с новой строки с двоеточием. Для отступа у определения достаточно поставить пустую строку перед ним.

Яблоко
Apple
:   Плод яблони, который употребляется в пищу в свежем
    виде, служит сырьём в кулинарии и для приготовления
    напитков.
:   Официально зарегистрированная социал-либеральная 
политическая партия современной России.

Апельсин

:   Плод апельсинного дерева, родом из Китая.

```markdown
Яблоко
Apple
:   Плод яблони, который употребляется в пищу в свежем
    виде, служит сырьём в кулинарии и для приготовления
    напитков.
:   Официально зарегистрированная социал-либеральная 
политическая партия современной России.


Апельсин

:   Плод апельсинного дерева, родом из Китая.
```

►  Сноски позволяют вынести уточняющий текст в другой место статьи.[^1]

```markdown
Сноски позволяют вынести уточняющий текст в другой место статьи.[^1]
...
[^1]: 
	Сноска позволяет вернуться назад к тексту. 
	
	Сноска может содержать несколько абзацев, но также может умещаться в одну строку.
```

►  Аббревиатуры указываются в любом месте документа, а затем раскрывают встречающиеся в статье термины (например, TerminID, HTML).

*[TerminID]: раскрытие термина.
*[HTML]: Hyper Text Markup Language.

```markdown
Аббревиатуры указываются в любом месте документа, а затем раскрывают встречающиеся в статье термины (например, TerminID, HTML).

*[TerminID]: раскрытие термина
*[HTML]: Hyper Text Markup Language
```


►  "Нижнее_подчёркивание_в_кавычках" теперь не обозначает выделение.

```markdown
"Нижнее_подчёркивание_в_кавычках" теперь не обозначает выделение.
```

►  Новые символы (:\|) подлежат экранированию (в местах, где возможна двузначная трактовка).

```markdown
Новые символы (:\|) подлежат экранированию (в местах, где возможна двузначная трактовка).
```



# Mathjax формулы

►  Строчные формулы [TeX/LaTeX][] вставляются через "\$...\$", например $ax^2 + bx + c = 0 | a \ne 0$.

[TeX/LaTeX]: https://en.wikibooks.org/wiki/LaTeX

```markdown
Строчные формулы [TeX/LaTeX][] вставляются через "\$...\$", например $ax^2 + bx + c = 0 | a \ne 0$.
```

►  Блоки формул [TeX/LaTeX][] обозначаются через "\$\$...\$\$".

$$
x_{1,2} = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

```markdown
$$
x_{1,2} = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$
```

!!! tip ""
	Формулы [TeX/LaTeX][] являются интерактивными, имеют собственное контекстное меню, позволяющее задать различные настройки отображения и получить другую информацию о формуле.

►  Формулы [MathML](https://www.w3.org/Math) вставляются через HTML теги "math".

<math>
	<msubsup>
		<mo>∫</mo>
		<mn>0</mn>
		<mn>1</mn>
	</msubsup>
	<mi>x</mi>
	<mrow>
	  <mo> ⅆ </mo>
	  <mi> x </mi>
	</mrow>
</math>

```html
<math>
	<msubsup>
		<mo>∫</mo>
		<mn>0</mn>
		<mn>1</mn>
	</msubsup>
	<mi>x</mi>
	<mrow>
	  <mo> ⅆ </mo>
	  <mi> x </mi>
	</mrow>
</math>
```

►  Новый символ (\$) подлежит экранированию.

```markdown
Новый символ (\$) подлежит экранированию.
```



# Admonitions заметки

►  Обычные заметки выносят текст в рамку.

!!! tip "Обычная заметка"
	Данный тип заметок позволяет добавить слабо относящийся к контексту текст.

```markdown
!!! tip "Обычная заметка"
	Данный тип заметок позволяет добавить слабо относящийся к контексту текст.
```

►  Информационные заметки выделяют блок на фоне остального текста.

!!! hint "Информационная заметка"
	Данный тип заметок позволяет добавить дополнительную информацию, которая

	* обычно не обязательна к прочтению,
	* может содержать другие элементы, например списки.

```markdown
!!! hint "Информационная заметка"
	Данный тип заметок позволяет добавить дополнительную информацию, которая

	* обычно не обязательна к прочтению,
	* может содержать другие элементы, например списки.
```

►  Важные заметки привлекают внимание читателя.

!!! alert "Важная заметка"
	Данный тип заметок позволяет обратить внимание читателя на важную информацию или предупредить его.

```markdown
!!! alert "Важная заметка"
	Данный тип заметок позволяет обратить внимание читателя на важную информацию.
```

►  Критические заметки требуют исключительного внимания.

!!! danger "Критическая заметка"
	Данный тип заметок позволяет сообщить читателю об ошибке или критически важной информации.

```markdown
!!! danger "Критическая заметка"
	Данный тип заметок позволяет сообщить читателю об ошибке или критически важной информации.
```

►  Полный синтаксис заметок выглядит следующим образом:

```markdown
!!! type optional-class1 optional-class2 "Note title"
	Content like simple text or
	markdown.
```

Заметка может иметь любой тип и любое количество дополнительных классов, но рекомендуется использовать следующие типы в порядке возрастания важности: **tip, hint, alert, danger**.

►  Название заметки можно опустить, задав пустую строку.

!!! tip ""
	Заметка без названия.

```markdown
!!! tip ""
	Заметка без названия.
```

►  Название заметки можно сократить до её типа.

!!! tip additional-class
	Заметка с автоматическим названием.

```markdown
!!! tip additional-class
	Заметка с автоматическим названием.
```


# Автособираемое оглавление

►  В любое место документа можно вставить автоматически собираемое из заголовков оглавление с помощью "\\[TOC\\]".

[TOC]

```markdown
В любое место документа можно вставить автоматически собираемое из заголовков оглавление с помощью "\\[TOC\\]".

[TOC]
```

►  По умолчанию заголовки копируются в оглавление, однако их можно переименовать с помощью аттрибута "data-toc-label". Достаточно задать аттрибут через синтаксис [markdown extra](#markdown-extra). 

##### У этого заголовка другое название в оглавлении {data-toc-label='Пример переименованного заголовка'}

```markdown
##### У этого заголовка другое название в оглавлении {data-toc-label='Пример переименованного заголовка'}
```

►  По умолчанию ID заголовков формируются автоматически на основе текста через символ "-" с добавлением уникального номера в конец через символ "_", если ID уже не был [определён](#custom-header-id) через синтаксис [markdown extra](#markdown-extra).

##### Заголовок с ID "custom-header-id" {#custom-header-id data-toc-label='Пример заголовка с ID'}

```markdown
По умолчанию ID заголовков формируются автоматически на основе текста через символ "-" с опциональным добавлением номера в конец через символ "_" для уникальности, если ID уже не был [определён](#custom-header-id) через синтаксис [markdown extra](#markdown-extra).

##### Заголовок с ID "custom-header-id" {#custom-header-id data-toc-label='Пример заголовка с ID'}
```



# Внутренние ссылки { #internal-links }

►  Внутренние ссылки, например [[Markdown]], обращаются к другим статьям или разделам по их названию.

```markdown
Внутренние ссылки, например [[Markdown]], обращаются к другим статьям или разделам по их названию.
```

!!! tip ""
	Если существует несколько одноимённых статей или разделов, ссылка выбирается **случайным образом**.

►  Вложенные внутренние ссылки, например [[Simple Wiki / Markdown]], позволяют устранить неоднозначность имён. Они создаются путём разделения уровней символом "/" (допускается использовать любое количество уровней и пробелов с каждой стороны).

```markdown
Вложенные внутренние ссылки, например [[Simple Wiki / Markdown]], позволяют устранить неоднозначность имён. Они создаются путём разделения уровней символом "/"...
```

►  Якорные внутренние ссылки, например [[Simple Wiki / Markdown # internal-links]], позволяют ссылаться на отдельную часть статьи. Для этого в конец ссылке необходимо добавить соответствующий ID через символ "#" (допускается использовать любое количество уровней и пробелов с каждой стороны).

```markdown
Якорные внутренние ссылки, например [[Simple Wiki / Markdown # internal-links]], позволяют ссылаться на отдельную часть статьи. Для этого в конец ссылки необходимо добавить соответствующий ID через символ "#"...
```

# Mermaid диаграммы

►  Диаграммы вставляются как блок кода на языке "mermaid". Подробнее синтаксис диаграмм можно изучить на официальном сайте [mermaid][].

~~~markdown
```mermaid
Код диаграммы
```
~~~

```mermaid
graph TD
	a --> b
```

~~~markdown
```mermaid
graph TD
	a --> b
```
~~~

►  Пример блок-схемы.

```mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
```

~~~markdown
```mermaid
graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange
```
~~~

►  Пример диаграммы последовательности.

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

~~~markdown
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```
~~~

►  Пример диаграммы Ганта.

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
```

~~~markdown
```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
```
~~~

►  Пример диаграммы состояний.

```mermaid
stateDiagram
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]
```

~~~markdown
```mermaid
stateDiagram
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]
```
~~~

►  Пример диаграммы классов.

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

~~~markdown
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
~~~

►  Пример диаграммы [git](https://git-scm.com).

```mermaid
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
```

~~~markdown
```mermaid
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
```
~~~

►  Пример диаграммы "сущность-связь".

```mermaid
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }
```

~~~markdown
```mermaid
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }
```
~~~

►  Пример диаграммы путевого журнала.

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

~~~markdown
```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```
~~~

►  Пример круговой диаграммы.

```mermaid
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

~~~markdown
```mermaid
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```
~~~












[^1]: 
	Сноска позволяет вернуться назад к тексту.
	
	Сноска может содержать несколько абзацев.



[base64image]:  "Пример изображения"